<template>
	<view class="wanl-money">
		<wanl-navbar :isBack="true" :background="{background: '#fff',}" :showGongNeng="true">
			<text slot="content" style="color: #000; width: 100%;padding-left: 20rpx;">
				{{name}}
			</text>
		</wanl-navbar>
		<view class="product_list">
			<z-paging ref="paging" v-model="dataList" class="listbox" @query="getDataList" default-page-size="15">
				<view class="lists">
					<view class="list" v-for="(item,index) in dataList" :key="index">
						<image :src="item.image"></image>
						<view class="name">{{item.title}}</view>
						<view class="price"><span>{{tag}}</span>{{item.price}}</view>
						<view class="price" style="font-size: 0.8rem;" v-if="item.yld_price>0">Y{{item.yld_price}}</view>
						<view class="btn" @click="commit(item)">购买</view>
					</view>
				</view>
			</z-paging>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				name: '',
				id: '',
				type: '',
				tag:'$'
			};
		},

		onLoad(option) {
			this.id = option.id
			this.name = option.name
			this.type = option.type
			if(this.type == 1){
				this.tag = 'Y'
			}
		},

		methods: {
			getDataList(pageNo, pageSize) {
				uni.request({
					url: "/index/categoryGoods",
					method: "POST",
					data: {
						page: pageNo,
						yld_type: this.type,
						shop_category_id: this.id
					},
					// 1.1.8 升级
					success: (res) => {
						if (res.res.code == 1) {
							this.$refs.paging.complete(res.res.data.list);
						}
					},
					fail() {
						this.$refs.paging.complete(false);
					}
				});
			},
			commit(val) {
				this.$wanlshop.to(`/pages/product/goods?id=${val.id}`);

			}
		}
	};
</script>

<style lang="scss">
	.product_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		margin: 0 20px;
		padding-top: 10px;

		.listbox {
			top: 90rpx;
			padding: 0 24rpx;
			margin-top: 34rpx;

			.lists {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;

				.list {
					padding: 36rpx 36rpx 20rpx 36rpx;
					background: #fff;
					width: 49%;
					border-radius: 36rpx;
					margin-bottom: 20rpx;

					image {
						width: 212rpx;
						height: 212rpx;
						display: block;
						margin: 0 auto;
					}

					.name {
						font-weight: 500;
						font-size: 32rpx;
						color: #000000;
						margin: 24rpx 0;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
					}

					.price {
						font-weight: bold;
						font-size: 40rpx;
						color: #327CFF;

						span {
							font-size: 28rpx;
						}
					}

					.btn {
						padding: 22rpx 0;
						background: linear-gradient(90deg, #00D2E8 0%, #008EF3 100%);
						box-shadow: 0px 4rpx 8rpx 0px rgba(0, 92, 176, 0.2);
						border-radius: 100rpx;
						font-weight: 500;
						font-size: 32rpx;
						color: #FFFFFF;
						text-align: center;
						margin-top: 24rpx;
					}
				}
			}


		}
	}
</style>